import React, { useState, useEffect } from 'react'
import { history } from 'umi'
import { Card, Row, Col, Button, Modal, Pagination, Form, message, Upload, Select } from 'antd'
import { PageHeaderWrapper } from "@ant-design/pro-layout"
import { FormOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
import request from '@/utils/request'
import styles from './index.less'

const { confirm } = Modal
const { Option } = Select

const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 18 },
};

export default (props: any) => {
    const { match, location } = props
    const { params: { albumId } } = match
    const [modalVisbale, setModalVisable] = useState(false)
    const [form] = Form.useForm()

    const [albumList, setAlbumList] = useState([])
    const [picList, setPicList] = useState({ list: [], total: 0 })
    const [current, setCurrent] = useState(1)

    const ToolBtn = () => {
        return (
            <div>
                <div style={{ display: "inline-block" }}>
                    <Upload
                        action={`http://127.0.0.1:8888/admin/goods/album-picture-upload?albumId=${albumId}`}
                        showUploadList={false}
                        onChange={(info: any) => {
                            if (info.file.status === "done") {
                                message.success(`${info.file.name}文件上传成功`);
                                getList()
                            }
                        }}
                    >
                        <Button type="primary" ghost style={{ marginRight: "6px" }}>
                            上传图片
                    </Button>
                    </Upload>
                </div>

                <Button style={{ marginRight: "6px" }} onClick={() => { }}>全选</Button>
                <Button type="dashed" style={{ marginRight: "6px" }} onClick={() => { }}>反选</Button>
                <Button danger style={{ marginRight: "6px" }} onClick={() => { }}>删除</Button>
                <Button type="primary" style={{ marginRight: "6px" }} onClick={() => setModalVisable(true)}>迁移</Button>
                <Button onClick={() => { history.push(`/goods/album`, { current: location.state.current }) }}>返回</Button>
            </div>
        );
    }

    const getList = (params: any = { current: current, pageSize: 16 }) => {
        console.log(params)
        request(`/goods/album-picture-list?albumId=${albumId}`, { params }).then((result) => {
            const { list, total } = result.data
            setPicList({ list, total })
        })
    }

    const destroy = (ids: any[]) => {
        confirm({
            title: 'Do you Want to delete these items?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                request(`/goods/album-picture-destroy`, {
                    method: "Delete",
                    params: { ids },
                }).then((result) => {
                    message.success("删除成功")
                    getList()
                })
            }
        });
    }

    const Album = (props: any) => {
        const { title, url, id, checked } = props;
        return (
            <div className={`${styles.album} ${checked ? styles.active : ''}`} onClick={() => {
                let result = { ...picList }
                result.list.forEach((item: any) => {
                    if (item.id == id) {
                        item.checked = !item.checked;
                    }
                })
                setPicList(result)
            }}>

                <div className={styles.albumBody}>
                    <img src={url || "http://stm.niuteam.cn/upload/goods/2020031910415400988.jpg"} alt="" />
                    <div className={styles.albumTool}>
                        <Button size="small" style={{ marginRight: "4px" }} onClick={() => {
                            setModalVisable(true)
                            request(`/goods/album/${id}`).then((result) => {
                                const data = result.data
                                form.setFieldsValue(data)
                            })
                        }}><FormOutlined /></Button>
                        <Button size="small" onClick={() => {
                            destroy([id])
                        }}><DeleteOutlined /></Button>
                    </div>
                </div>
                <div className={styles.albumFoot}>
                    <div style={{ fontWeight: 600, cursor: "pointer", overflow: "hidden" }}>{title}</div>
                </div>
            </div>
        );
    }

    const onFinish = (values: any) => {


        const selectList = picList.list.filter((item: any) => {
            return Boolean(item.checked)
        }).map((item: any) => item.id)
        values.pic_ids = selectList
        request(`/goods/migrate-album`, {
            method: 'PUT',
            data: { ...values },
        }).then((result) => {
            if (result.code === 200) {
                setModalVisable(false)
                getList()
            }
        })
    }

    useEffect(() => {
        getList()
    }, [])

    useEffect(() => {
        request(`/goods/album-all`).then((result) => {
            if (result.code === 200) {
                setAlbumList(result.data)
            }
        })
    }, [])

    return (
        <PageHeaderWrapper title={false}>
            <Card title={<ToolBtn />}>
                <div style={{ padding: "20px 0" }}>
                    <Row gutter={16}>
                        {
                            picList.list.map((item: any, inx: number) => {
                                return (<Col span={3} key={inx} style={{ paddingTop: "10px" }}>
                                    <Album title={item.title} url={item.url} id={item.id} checked={item.checked} />
                                </Col>)
                            })
                        }

                    </Row>
                </div>
                <Modal
                    title={"相册迁移"}
                    visible={modalVisbale}
                    onOk={() => form.submit()}
                    onCancel={() => setModalVisable(false)}
                    getContainer={false}
                >
                    <Form
                        {...layout}
                        form={form}
                        onFinish={onFinish}
                    >
                        <Form.Item label="选择相册" name="album_id">
                            <Select placeholder="相册选择">
                                {
                                    albumList.map((item: any, inx: number) =>
                                        <Option value={item.id} key={inx}>{item.title}</Option>)
                                }
                            </Select>
                        </Form.Item>
                    </Form>
                </Modal>

                <Pagination defaultPageSize={16} current={current} total={picList.total} onChange={(page, pageSize) => {
                    setCurrent(page)
                    getList({
                        current: page,
                        pageSize,
                    })
                }} />
            </Card>
        </PageHeaderWrapper>
    );
}